<template>
	<view class="login">
		<view class="login-header ff-bg-blue">
			<view class="login-header-logo">
				<image class="animate__animated animate__slideInDown"
					src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/login-logo.png" mode="">
				</image>
				<view class="ff-color-fff ff-font-25 ff-font-weight-600">你好，欢迎登录</view>
			</view>
			<image class="bg-logo"
				src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/login-bg-logo.png" mode="">
			</image>
		</view>
		<view class="login-content ff-bg-fff">
			<view>
				<account-login ref="accountLogin" @multiAccountLogin="multiAccountLogin" v-show="!loginState" />
				<phone-login ref="phoneLogin" @multiPhoneLogin="multiPhoneLogin" v-show="loginState" />
			</view>
			<view class="ff-margin-top-20 ff-text-center ff-font-13">
				<view v-show="loginState" @click="loginStateClick">账号密码登录</view>
				<!-- <view v-show="!loginState" @click="loginStateClick">短信验证码登录</view> -->
				<view v-show="!loginState" @click="forgotPasswordClick">忘记密码</view>
			</view>
		</view>
		<view class="login-otherLogin ff-flex-between ff-font-14">
			<view @click="otherLoginClick">
				其他方式登录
				<u-icon name="arrow-right" color="#9c9fae"></u-icon>
			</view>
			<view class="login-otherLogin-help-word" @click="helpWord">帮助文档</view>
		</view>
		<!-- 多账号登录 -->
		<u-popup v-model="multiState" mode="bottom" :mask-close-able="false" :closeable="true" border-radius="40"
			:safe-area-inset-bottom="true">
			<view class="multi">
				<view class="multi-title ff-font-18 ff-font-weight-600 ff-text-center ff-margin-bottom-30">请选择本次登录的账号
				</view>
				<view class="multi-content ff-flex-between ff-bg-fff ff-border-radius-10 ff-margin-bottom-15"
					v-for="(item, index) of multiList" :key="index" @click="multiClick(item)">
					<view class="ff-align-items-one">
						<image src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/reg-3.png"
							mode="">
						</image>
						<view class="multi-content-info">
							<view class="ff-font-15 ff-margin-bottom-8 ff-line-height-1-3">{{ item.companyName }}</view>
							<view class="ff-font-13">{{ item.name }}</view>
						</view>
					</view>
					<view class="multi-content-select">
						<image v-show="item.id != loginSelectId"
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/no-select.png"
							mode="">
						</image>
						<image v-show="item.id == loginSelectId"
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/select.png"
							mode="">
						</image>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 其他方式登录 -->
		<u-popup v-model="wechatState" mode="bottom" :mask-close-able="false" :closeable="true" border-radius="40"
			:safe-area-inset-bottom="true">
			<view class="wechat">
				<view class="multi-title ff-font-16 ff-font-weight-600 ff-text-center ff-margin-bottom-30">请选择登录方式
				</view>
				<view class="wechat-content ff-text-center ff-font-12">
					<image class="ff-margin-bottom-20" @click="wechatImgClick"
						src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/wechat.png" mode="">
					</image>
					<u-checkbox-group>
						<u-checkbox v-model="wechatchecked" shape="circle">
							我已阅并同意
							<text class="textColor" @click.stop="userAgreementClick">《用户协议》</text>
							<text class="textColor" @click.stop="privacyPolicyClick">《隐私政策》</text>
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</u-popup>
		<f-loading ref="loading" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import accountLogin from './components/accountLogin.vue';
	import phoneLogin from './components/phoneLogin.vue';
	export default {
		name: 'Login',
		components: {
			accountLogin,
			phoneLogin
		},
		data() {
			return {
				loginState: false, // 登录方式切换
				wechatState: false, // 其他方式登录弹框
				wechatchecked: false, // 勾选用户协议的状态
				multiState: false, // 多账号登录弹框
				loginSelect: false, // 多账号登录选中/未选中
				loginSelectId: '', // 多账号登录选中/未选中ID
				multiList: [], // 多账号登录数据列表
				loginSubmitInfo: {}, // 多账号登录提交的内容
				multiUrls: '', // 多账号登录的url(分为手机号登录i和微信登录)
				// 微信登录需要提交的参数
				loginWXSubmitInfo: {
					code: '',
					encryptedData: '',
					iv: '',
					signature: '',
					rawData: ''
				},
				providerList: [] // 供应商服务列表数据（微信登录）
			};
		},
		onLoad() {
			this.getProviderInfo(); // 获取服务供应商的数据列表
		},
		methods: {
			...mapMutations(['setUserInfo']),
			// 点击切换---短信验证码登录or账号密码登录
			loginStateClick() {
				this.loginState = !this.loginState;
			},
			// 忘记密码
			forgotPasswordClick() {
				this.$pageJump.navigateTo('/pages/loginRegister/login/components/forgetPassword');
			},
			// 微信登录-------------
			// 其他方式登录
			// 点击查看用户协议
			userAgreementClick() {
				this.$pageJump.navigateTo('/pages/loginRegister/login/components/userAgreement');
			},
			// 点击查看隐私政策
			privacyPolicyClick() {
				this.$pageJump.navigateTo('/pages/loginRegister/login/components/privacyPolicy');
			},
			// 打开其它登录方式弹窗------
			otherLoginClick() {
				this.wechatState = true;
			},
			// 获取服务供应商
			getProviderInfo() {
				const filters = ['weixin'];
				uni.getProvider({
					service: 'oauth', // 服务类型（微信：oauth，新浪：share）
					success: res => {
						// console.log('获取服务供应商---------', res);
						if (res.provider && res.provider.length) {
							res.provider.forEach(item => {
								if (~filters.indexOf(item)) {
									this.providerList.push({
										value: item,
										image: 'https://fire-system.oss-cn-beijing.aliyuncs.com/xcx_pic/static/img/' +
											item + '.png'
									});
								}
							});
						}
					},
					fail: err => {
						console.error('获取服务供应商失败：', err);
					}
				});
			},
			// 点击微信图标登录
			wechatImgClick() {
				// console.log('用户是否勾选--------', this.wechatchecked);
				if (!this.wechatchecked) {
					this.$refs.uToast.show({
						title: '请认真阅读并勾选用户协议和隐私政策',
						type: 'warning '
					});
					return;
				}
				this.wechatLoginOne(); // 微信登录
			},
			// 微信登录-----1
			wechatLoginOne() {
				let that = this;
				that.wechatState = false; // 关闭微信登录的弹框
				if (that.providerList.length < 1) {
					that.$refs.uToast.show({
						title: '获取服务供应商失败，请重启小程序后再试!',
						type: 'error'
					});
					return;
				}
				that.$refs.loading.openLoading('微信登录中···');
				uni.login({
					provider: 'weixin', //使用微信登录
					success: res => {
						// console.log('微信登录返回------', res);
						that.loginWXSubmitInfo.code = res.code;
						uni.getUserInfo({
							provider: 'weixin',
							success: (infoRes, errMsg) => {
								// console.log('用户信息------------', infoRes);
								that.loginWXSubmitInfo.encryptedData = infoRes.encryptedData;
								that.loginWXSubmitInfo.iv = infoRes.iv;
								that.loginWXSubmitInfo.signature = infoRes.signature;
								that.loginWXSubmitInfo.rawData = infoRes.rawData;
								that.$refs.loading.closeLoading(); // 定义loadingTxt内容
								that.wechatLoginTwo(); // 微信登录第二步（调取后台接口）
							},
							fail: err => {
								// console.error('getUserInfo授权登录失败：', err);
								that.$refs.loading.closeLoading(); // 定义loadingTxt内容
								that.$refs.uToast.show({
									title: err,
									type: 'error'
								});
							}
						});
					},
					fail: err => {
						console.error('login 授权登录失败：', err);
						that.$refs.loading.closeLoading(); // 定义loadingTxt内容
						that.$refs.uToast.show({
							title: err,
							type: 'error'
						});
					}
				});
			},
			// 微信登录-----2
			wechatLoginTwo() {
				let that = this;
				that.$refs.loading.openLoading('微信登录中···');
				that.$http
					.post({
						url: '/loginByWXV2',
						data: that.loginWXSubmitInfo
					})
					.then(res => {
						// console.log('微信登录返回的数据-----', res);
						if (res.code == 200 && res.success && res.data.multipleUsers !== null) {
							// 多账号登录
							that.$refs.loading.closeLoading(); // 定义loadingTxt内容
							that.multiList = res.data.multipleUsers;
							that.loginSubmitInfo = that.loginWXSubmitInfo;
							that.multiState = true; // 打开多账号登录弹框
						} else if (res.code == 200 && res.success) {
							that.$refs.loading.closeLoading(); // 定义loadingTxt内容
							uni.setStorageSync('isUserState', true); // 登录状态
							this.setUserInfo(res.data.user); // 登录后获取的用户信息
							this.$refs.accountLogin.loginHandle(res.data.user); // 登录成功后判断人员类型
						} else {
							that.$refs.loading.closeLoading(); // 定义loadingTxt内容
							that.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
					});
			},
			// 多账号登录(账号密码)
			multiAccountLogin(e) {
				// console.log('多账号登录的信息列表--------', e);
				this.multiList = e.multipleUsers;
				this.loginSubmitInfo = e.loginSubmitInfo;
				this.multiState = true; // 打开多账号登录弹框
			},
			// 多账号登录(短信验证码)
			multiPhoneLogin(e) {
				// console.log('多账号登录的信息列表--------', e);
				this.multiList = e.multipleUsers;
				this.loginSubmitInfo = e.loginSubmitInfo;
				this.multiState = true; // 打开多账号登录弹框
			},
			// 多账号登录------选择某一个人员登录
			multiClick(item) {
				this.loginSelectId = item.id;
				if (this.loginSubmitInfo.loginType == 0 || this.loginSubmitInfo.loginType == 1) {
					this.multiUrls = '/multipleLogin';
					var loginSubmitInfo = {
						phone: this.loginSubmitInfo.phone,
						password: this.loginSubmitInfo.password,
						validCode: this.loginSubmitInfo.validCode,
						loginType: this.loginSubmitInfo.loginType,
						id: item.id
					};
				} else {
					this.multiUrls = '/multipleLoginByWX';
					var loginSubmitInfo = {
						code: this.loginSubmitInfo.code,
						encryptedData: this.loginSubmitInfo.code,
						iv: this.loginSubmitInfo.iv,
						signature: this.loginSubmitInfo.signature,
						rawData: this.loginSubmitInfo.rawData,
						id: item.id
					};
				}
				this.$refs.loading.openLoading('登录中···');
				this.$http
					.post({
						url: this.multiUrls,
						data: loginSubmitInfo
					})
					.then(res => {
						// console.log('多账号登录返回的数据---------', res);
						if (res.code == 200 && res.success) {
							uni.setStorageSync('isUserState', true); // 登录状态
							this.setUserInfo(res.data.user); // 登录后获取的用户信息
							this.$refs.accountLogin.loginHandle(res.data.user); // 登录成功后判断人员类型
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
						this.$refs.loading.closeLoading();
					});
			},
			// 帮助文档
			helpWord() {
				uni.showLoading({
					title: '加载中'
				});
				uni.downloadFile({
					url: 'https://attach.sdhuan.cn/fire-zongdui/help4.0.pdf',
					success: function(res) {
						// console.log(res)
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function() {
								// console.log('打开文档成功');
								setTimeout(function() {
									uni.hideLoading();
								}, 100);
							}
						});
					}
				});
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	@import './components/login.scss';
</style>